<template>
  <n-form ref="formRef" :model="dynamicForm" :style="{ maxWidth: '640px' }">
    <n-form-item
      v-for="(item, index) in dynamicForm.interface"
      :key="index"
      label="系统接口"
    >
      <n-input v-model:value="item.system" clearable />
      <n-input v-model:value="item.url" clearable />
      <n-input v-model:value="item.type" clearable />
      <div style="display: flex;width: 150px;">
        <n-button style="margin-left: 12px" @click="addItem">
          增加
        </n-button>
        <n-button style="margin-left: 12px" @click="removeItem(index)">
          删除
        </n-button>
      </div>
    </n-form-item>
  </n-form>
</template>

<script lang="ts">
import type { FormInst } from 'naive-ui'
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  setup() {
    const formRef = ref<FormInst | null>(null)

    const dynamicForm = reactive({
      interface: [{ system: "", url: "", type: "" }]
    })

    const removeItem = (index: number) => {
      dynamicForm.interface.splice(index, 1)
    }

    const addItem = () => {
      dynamicForm.interface.push({ system: "", url: "", type: "" })
    }


    return {
      formRef,
      dynamicForm,
      addItem,
      removeItem,
    }
  }
})
</script>